<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title></title>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="description" content="%description%" />
	<meta name="keywords" content="" />
	<meta name="author" content="ComponentOne" />
	<link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
	<script src="../../external/jquery-1.8.2.min.js" type="text/javascript"></script>
	<script src="../../external/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
	<script src="../../external/globalize.min.js" type="text/javascript"></script>
	<script src="../../external/raphael-min.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.raphael.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.wijchartcore.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.wijbubblechart.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(document).ready(function () {
			var data = [{
				Income: 2972,
				Population: 1150,
				Expectency: 65
			}, {
				Income: 7931,
				Population: 1340,
				Expectency: 73
			}, {
				Income: 14318,
				Population: 140,
				Expectency: 69
			}, {
				Income: 42066,
				Population: 309,
				Expectency: 78
			}, {
				Income: 30866,
				Population: 126,
				Expectency: 83
			}];
			$("#wijbubblechart").wijbubblechart({
				legend: {
					size: {
						width: 20,
						height: 14
					}
				},
				axis: {
					y: {
						text: "Life Expectancy",
						labels: {
							textAlign: "far"
						}
					},
					x: {
						text: "Income",
						tickMajor: {
							position: "inside"
						},
						labels: {
							textAlign: "near"
							//,
							//width: 60
						}
					}
				},
				hint: {
					content: function () {
						return "" + this.data.label + " \nLife Expectency: " + this.y + " \nIncome: " + Globalize.format(this.x, "n") + " \nPopulation: " + this.data.y1 + "M";
					},
					style: {
						stroke: "#000",
						"stroke-width": 10
					}
				},
				header: {
					text: "Wealth & Health of Nations - 2010"
				},
				dataSource: data,
				seriesList: [{
					legendEntry: true,
					label: "east",
					data: {
						x: { bind: "Income" },
						y: { bind: "Expectency" },
						y1: { bind: "Population" }
					}
				}]

			});
		});
	</script>
</head>
<body class="demo-single">
	<div class="container">
		<div class="header">
			<h2>
				Overview</h2>
		</div>
		<div class="main demo">
			<!-- Begin demo markup -->
			<div id="wijbubblechart" class="ui-widget ui-widget-content ui-corner-all" style="width: 756px; height: 475px;">
			</div>
			<!-- End demo markup -->
			<div class="demo-options">
				<!-- Begin options markup -->
				<!-- End options markup -->
			</div>
		</div>
		<div class="footer demo-description">
			   
		</div>
	</div>
</body>
</html>
